<template>
<app-main>
  <div class="wrapper">
    <div style="margin: 50px 0">
      <div v-if="active === 'login'" style="max-width: 600px; margin: 113px auto 112px">
        <form-login @toRegister="toRegister" :showToRegister='true'/>
      </div>
      <div v-if="active === 'register'" style="max-width: 600px; margin: auto">
        <form-register @toLogin='toLogin' :showToLogin='true'/>
      </div>
    </div>
  </div>
</app-main>
</template>

<script>
import AppMainWrapper from '@/components/wrapper/AppMainWrapper'
import FormLogin from '@/components/form/FormLogin'
import FormRegister from '@/components/form/FormRegister'

export default {
  name: 'AppLoginRegister',
  props: {
    active: {
      type: String,
      default: 'login',
      validator: value => {
        return ['login', 'register'].indexOf(value) !== -1
      }
    }
  },
  components: {
    FormLogin,
    FormRegister,
    'app-main': AppMainWrapper
  },
  methods: {
    toRegister () {
      this.$router.push('/register')
    },
    toLogin () {
      this.$router.push('/login')
    }
  }
}
</script>
